<template>
  <div>
    <div class="margin-little-top">
      <label for="">区间范围查找:</label>
      <el-checkbox class="margin-left" v-model="input.rangeParam.enable">开启</el-checkbox>
      <el-input-number class="margin-left" :disabled="rangeParamDisabled" v-model="input.rangeParam.start" style="width: 120px" size="small" :min="0" :max="keyObj.length"/>
      <el-input-number  :disabled="rangeParamDisabled" v-model="input.rangeParam.stop" style="width: 120px" size="small" :min="0" :max="keyObj.length"/>
      <el-button plain :disabled="rangeParamDisabled" size="small" @click="loadDataRequest">加载数据</el-button>
    </div>
    <div class="margin-little-top">
      <label for="">分数范围查找:</label>
      <el-checkbox class="margin-left" v-model="input.scoreRangeParam.enable">开启</el-checkbox>
      <el-input-number class="margin-left" :disabled="scoreRangeParamDisabled" v-model="input.scoreRangeParam.min" style="width: 120px" :precision="2" size="small" :min="0" />
      <el-input-number  :disabled="scoreRangeParamDisabled" v-model="input.scoreRangeParam.max" style="width: 120px" :precision="2" size="small" :min="0" />
      <el-button plain :disabled="scoreRangeParamDisabled" size="small" @click="loadDataRequest">加载数据</el-button>
    </div>
    <el-row>
      <el-col :span="14">
        <el-input suffix-icon="el-icon-search" placeholder="搜索 " v-model="input.keyScanParam.pattern"
                  @keyup.enter.native="loadDataRequest" size="small"/>
      </el-col>
      <el-col :span="10">
        <el-button-group>
          <el-button plain size="mini" icon="el-icon-coordinate" @click="resetScanSetOrZSetKey">重置</el-button>
          <el-button plain size="mini" :disabled="scanResult.finish" icon="el-icon-arrow-right" @click="scanZSetKeyNextPage">下一页</el-button>
        </el-button-group>

      </el-col>
    </el-row>

    <p v-for="item in data">{{item}}</p>
  </div>
</template>

<script>
import redis from "@/api/redis";

export default {
  name: "zset",
  props: {
    keyObj: {
      type: Object,
      required: true
    },
    connParam:{
      type: Object,
      required: true
    },
    serializerParam: {
      type: Object,
      required: true
    },
    all: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      input: {
        rangeParam: {
          enable: false,
          start: 0 ,
          stop: 0
        },
        scoreRangeParam:{
          enable: false,
          min: 0 ,
          max: 0
        },
        keyScanParam: {
          pattern: '*',
          limit: 20,
          cursor: 0
        },
      },
      scanResult: {
        cursor: 0
      },
      data: null
    }
  },
  methods: {
    getData(){
      return this.data;
    },
    loadData(){
      this.loadDataRequest();
    },
    loadDataRequest(){
      redis.readData(this.connParam,this.keyObj.key,this.serializerParam,
        this.all,this.input.keyScanParam,this.input.rangeParam,this.input.scoreRangeParam).then(res => {
        // this.data = res.data;
        this.scanResult = res.data;
        this.data = res.data.tuples;
      })
    },
    resetScanSetOrZSetKey(){
      Object.assign(this.input.keyScanParam,{pattern:'*',cursor:'0',limit:20})
      this.loadDataRequest();
    },
    scanZSetKeyNextPage(){
      this.input.keyScanParam.cursor = this.scanResult.cursor;
      this.loadDataRequest();
    }
  },
  computed: {
    rangeParamDisabled(){
      return this.all || !this.input.rangeParam.enable;
    },
    scoreRangeParamDisabled(){
      return this.all || !this.input.scoreRangeParam.enable;
    }

  }
}
</script>

<style scoped>

</style>
